<template>
  <div class="login">
    <header>
      <el-image :src="require('@/assets/img/logo.png')" />
      <span>未来科技城智慧规建管系统</span>
    </header>

    <div class="ms-login">
      <div class="ms-title">
        <span>用户登录</span>
      </div>
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="loginName">
          <el-input
            v-model="loginForm.loginName"
            placeholder="用户名"
          >
            <template #prepend>
              <!--              <el-button icon="el-icon-user"></el-button>-->
              <i class="el-icon-user" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="loginPassword">
          <el-input
            type="password"
            placeholder="密码"
            v-model="loginForm.loginPassword"
            @keyup.enter="submitLoginForm"
            show-password
          >
            <template #prepend>
              <!--              <el-button icon="el-icon-lock"></el-button>-->
              <i class="el-icon-lock" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="verification">
          <slide-captcha
            :on-success="onSlideSuccess"
            :on-failure="onSlideFailure"
          />
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitLoginForm"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Base64 } from 'js-base64'
import SlideCaptcha from '@/components/slideCaptcha'
import cacheUtil from '@/utils/cache'
import { login } from '@/api/user'
import { encryptDes } from '@/utils/crypto'

function checkHasPri(list) {
  if (!list) {
    return false
  }
  const arr = list.filter((e) => e.hasPri)
  return arr.length > 0
}
export default {
  name: 'Login',
  components: {
    SlideCaptcha
  },
  data() {
    const validateVerification = (
      rule,
      value,
      callback
    ) => {
      if (value === null) {
        callback(new Error('请拖动滑动验证码'))
      } else if (value === false) {
        callback(new Error('验证失败'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        loginName: '',
        loginPassword: '',
        verification: null
      },
      loginFormRules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        loginPassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        verification: [
          {
            validator: validateVerification,
            trigger: 'blur'
          }
        ]
      },
      remember: false
    }
  },
  methods: {
    submitLoginForm() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          const loginParams = { ...this.loginForm }
          // loginParams.loginPassword = Base64.encode(
          //   loginParams.loginPassword
          // )
          loginParams.loginPassword = encryptDes(
            loginParams.loginPassword
          )
          delete loginParams.verification
          // 测试
          login(loginParams).then((res) => {
            if (res.success) {
              if (
                !checkHasPri(
                  res.data?.moduleTree[0]?.children
                )
              ) {
                this.$message.error(
                  '账号没有权限，请联系管理员。'
                )
                return
              }
              if (!res.data.moduleTree) {
                this.$message.error(
                  '该用户无菜单模块权限，无法登录！'
                )
                return
              }
              cacheUtil.setItem(
                'menu',
                JSON.stringify(res.data.moduleTree)
              )
              const permissions = []
              for (let item of res.data.moduleButton) {
                permissions.push(item.pkid)
              }
              cacheUtil.setItem(
                'btnAuth',
                JSON.stringify(permissions)
              )
              cacheUtil.setItem('token', res.data.token)
              cacheUtil.setItem(
                'userName',
                res.data.userName
              )
              cacheUtil.setItem(
                'deptName',
                res.data.deptName
              )
              cacheUtil.setItem(
                'status',
                res.data.userLevel
              )
              cacheUtil.setItem(
                'roleLevel',
                res.data.roleLevel
              )
              cacheUtil.setItem('userId', res.data.pkid)
              if (res.data.mapBaseConfig) {
                cacheUtil.setItem(
                  'camera',
                  JSON.stringify(res.data.mapBaseConfig)
                )
              } else {
                cacheUtil.setItem('camera', '')
              }
              this.$router.replace('/')
              // this.getMenuTree(res.data.roleId)
              // if(res.data.userLevel!=3){
              //   this.getMenuTree(res.data.roleId)
              // }else{
              //   this.$router.replace('/')
              // }
              // const user = JSON.stringify({
              //   token: res.data.token
              // })
              // cacheUtil.setItem('user', user)
            } else {
              this.$message.error(res.message)
            }
          })
          // cacheUtil.setItem('token', 'test-token')
          // this.$router.replace('/')
          // login(loginParams).then((res) => {
          //   if (res?.success) {
          //     oneLogin({
          //       loginName: res.data.userPhone,
          //       password: loginForm.loginPassword
          //     }).then((res2) => {
          //       store.dispatch('loginAction', res.data)
          //       store.dispatch('loginOne', res2.data)
          //       ElMessage.success('登录成功')
          //     })
          //   }
          // })
        } else {
          return false
        }
      })
    },
    onSlideSuccess() {
      this.loginForm.verification = true
      this.$refs.loginFormRef.validateField('verification')
    },
    onSlideFailure() {
      this.loginForm.verification = false
      this.$refs.loginFormRef.validateField('verification')
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/login_background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  header {
    display: flex;
    align-items: center;
    padding: 16px 34px;

    .el-image {
      width: 39px;
    }

    span {
      font-size: 30px;
      font-family: 'PingFang SC';
      font-weight: 800;
      color: white;
      margin-left: 9px;
    }
  }

  .ms-login {
    position: absolute;
    right: 360px;
    top: 50%;
    transform: translateY(-50%);
    width: 416px;
    height: 484px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;

    .ms-title {
      width: 100%;
      text-align: center;
      margin: 37px 0 32px 0;

      span {
        font-family: 'PingFang SC';
        font-size: 24px;
        font-weight: 500;
        color: #6a6a6a;
      }
    }

    .ms-content {
      padding: 0 38px;

      .el-form-item {
        margin-bottom: 26px;

        ::v-deep {
          .el-input {
            height: 46px;

            .el-input-group__prepend {
              width: 46px;
              height: 46px;
              padding: 0;
              background-color: transparent;
              border: 1px solid #e9e9e9;
              border-right: 0;
              text-align: center;

              i {
                font-size: 20px;
              }
            }

            .el-input__inner {
              padding: 0 30px 0 0;
              height: 46px;
              border: 1px solid #e9e9e9;
              border-left: 0;
            }
          }
        }
      }

      .el-checkbox {
        font-size: 14px;
        font-family: 'PingFang SC';
        font-weight: 400;
        color: #6a6a6a;
      }

      .login-btn {
        text-align: center;
        margin-top: 39px;

        & button {
          width: 100%;
          height: 46px;
          background-color: #00baff;
          border-color: #00baff;
          font-size: 16px;
          font-family: 'PingFang SC';
          color: white;
        }
      }
    }
  }
}
</style>
